class Calculator {
    constructor() {}

    add = (a, b) => a + b;
    subtract = (a, b) => a - b;
}
const calculator = new Calculator();
calculator.add(1, 2);
// 假设我们要在这个基础上不断扩展 新的功能,  不断的往里面添加编写代码

// 如果要添加 mins方法呢。可能得修改源代码
// 基于本体， 来扩展新的功能  设计思想 在 webpack babel eslint vue pinia 都有对应的实战

class Ca {
    // 里面所有的内容都是  插件组成
    // 里面有一个 插件集的概念 比如 webpack 里面有很多插件 loader, plugin
    //  webpack-plugin     babel-plugin   eslint-plugin  本质就是数组

    // 插件集
    plugins = [];
    constructor() {}
    // 所有的插件都会在插件底座注册后，将插件注册到插件集中！ 类似这个计算器里面会存储所有的插件 比如 add方法 sub方法

    // 怎么设计方法？ 在插件集中的 注册方式

    // 插件化设计的核心思想1： 插件底座 2： 插件注册方式 3: 调用对应的插件      提升代码的复用性和设计思想

    // 以 pinia vue 为例子
    /**
     *
     * plugin的结构 插件名称和对应的方法
     *  {
     *  name,
     *  fn
     * }
     * @param {*} plugin
     */
    use(plugin) {
        // 一定有 注册方法
        this.plugins.push(plugin);
        this[plugin.name] = plugin.fn;
    }
}

// 比如： 按照这个规范去定义就行了
const AddPlugin = {
    name: "add", // 插件名称
    fn(a, b) {
        return a + b;
    }, // 插件实体
};

const MinusPlugin = {
    name: "minus", // 插件名称
    fn(a, b) {
        return a - b;
    }, // 插件实体
};

// 都是独立的 怎么联系起来呢？

// 初始化插件底座
const ca = new Ca();
ca.use(AddPlugin);
ca.use(MinusPlugin);

console.log(ca.add(1, 2));
console.log(ca.minus(1, 2));

// 插件流程和设计思想掌握

// 通过插件化 应用到业务场景当中！
